<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      网箱信息
    </div>
    <div>
      <ul class="list-filter">
        <li>
          <p>网箱编号</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>创建日期</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>管理人姓名</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p style="margin-top: 25px">
            <el-button size="small" type="primary">查询</el-button>
          </p>
        </li>
      </ul>
      <div class="list-wrapper mt10">
        <p>
          <el-button type="primary" size="small" @click="goCreate">创建网箱信息</el-button>
        </p>
        <el-table
          header-row-class-name="table-list-header"
          row-class-name="table-list-row"
          class="mt10" :data="tableData">
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          >
            <template  v-if="item.prop === 'operation'">
              <el-link @click="goEdit" type="primary">修改</el-link>
              <el-link @click="goDetail" class="ml10" type="primary">详情</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="txc">
          <el-pagination
            class="mt20"
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          label: '网箱编号',
          prop: 'id'
        },
        {
          label: '网箱名称',
          prop: 'name'
        },
        {
          label: '位置信息',
          prop: 'position'
        },
        {
          label: '管理者名称',
          prop: 'admin'
        },
        {
          label: '所有者名称',
          prop: 'owner'
        },
        {
          label: '简介',
          prop: 'desc'
        },
        {
          label: '操作',
          prop: 'operation',
          width: 200
        }
      ],
      tableData: [
        {
          id: 'WX20201004001',
          name: '网箱一号',
          position: '太湖',
          admin: '张三',
          owner: '张三',
          desc: '太湖基地一号网箱'
        },
        {
          id: 'WX20201004002',
          name: '网箱二号',
          position: '太湖',
          admin: '张三',
          owner: '张三',
          desc: '太湖基地二号网箱'
        }, {
          id: 'WX20201004003',
          name: '网箱三号',
          position: '太湖',
          admin: '张三',
          owner: '张三',
          desc: '太湖基地三号网箱'
        }, {
          id: 'WX20201004004',
          name: '网箱四号',
          position: '太湖',
          admin: '张三',
          owner: '张三',
          desc: '太湖基地四号网箱'
        }, {
          id: 'WX20201004005',
          name: '网箱五号',
          position: '太湖',
          admin: '张三',
          owner: '张三',
          desc: '太湖基地五号网箱'
        }
      ]
    }
  },
  methods: {
    goEdit () {
      this.$router.push('editBox')
    },
    goCreate () {
      this.$router.push('createBox')
    },
    goDetail () {
      this.$router.push('boxDetail')
    }
  }
}
</script>
<style lang="scss">

</style>
